<template>
  <div>
    <Top title="登录" iconShow="1"></Top>
    <div class="tabbar">
        <div class="tabbar-left" :class="{'selected':selected==1}" @click="pageOne">
          动态码登录 
        </div>
        <div class="tabbar-right" :class="{'selected':selected==2}" @click="pageTwo">
          密码登录
        </div>
    </div>
    <Changecode v-if="selected==2"></Changecode>
    <Password v-if="selected==1"></Password>
    
    <!-- <router-view></router-view> -->
    <!-- <div class="formleft">
      <div class="formleft-tel">
        <mt-field label="" placeholder="请输入手机号" v-model="formdata.tel">
          <i class="iconfont icon-fanhui"></i>
        </mt-field>
      </div>
      <div class="formleft-password">
        <mt-field label="" placeholder="请输入密码" type="password" v-model="formdata.password"></mt-field>
      </div>
    </div>

    <div class="formright">
      <div class="formright-tel">
        <mt-field label="" placeholder="请输入手机号" v-model="formdata.tel">
          <i class="iconfont icon-fanhui" style="float:left"></i>
        </mt-field>
      </div>
      <div class="formright-password">
        <mt-field label="" placeholder="请输入密码" type="password" v-model="formdata.password"></mt-field>
      </div>
    </div> -->
  </div>
</template>
<script>
import Changecode from './abc/ChangeCode'
import Password from './abc/Password'
import Top from '../components/Header'
export default {
  name: 'login',
  data() {
    return {
      formdata: {
        tel: '',
        password: ''
      },
      selected: 1
    }
  },
  watch: {
    selected: function (val, oldVal) {
      // console.log(val)
      //val     切换后 id
      //oldVal  切换前 id 
    }
  },
  components: { Top,Changecode,Password },
  mounted() {

  },
  methods:{
    pageOne(){
      this.selected =1;
    },
    pageTwo(){
      this.selected =2;
    }
  }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.tabbar {
  margin-top: 1.2rem;
  width: 100%;
  height: 1.35rem;
  background: #fff;
  line-height: 1.35rem;
  font-size: 0.38rem;
  box-sizing: border-box;
  padding: 0 1.17rem;
  color: #000000;
  &-left {
    float: left;
    width: 35%;
    height: 1.24rem;

    
  }
  &-right {
    float: right;
    width: 35%;
    height: 1.24rem;
    
  }
}
.selected{
      color:$primaryColor;
  border-bottom: 4px solid $primaryColor !important;
}
// a{
//   color: #000000;
// }
.router-link-active {
  height: 1.24rem;
  width: 100%;
  display: inline-block;
  color:$primaryColor;
  border-bottom: 4px solid $primaryColor !important;
}
</style>


